<template>
  <!-- 排行榜用 -->
  <div class="card__root">
    <div class="common-layout__card2">
      <div class="rank-cover">
        <VideoCover1 :height="130" :videoInfo="props.videoInfo!"></VideoCover1>
        <div
            class="rank-index"
            v-if="!isNull(props.index)"
            :style="{
              'background-color': props.index == 0 ? '#FFB01F' : props.index == 1 ? '#94B5DB' : props.index == 2 ? '#EF9C8E' : '#7B859A',
              'border': '1px solid #eeeeee'
            }"
        >{{ props.index + 1 }}
        </div>
      </div>
      <div>
        <h3 class="link text-hidden__1"
            :title="props.videoInfo?.title"
            @click="router.toVideo(props.videoInfo!.id)"
        >{{ props.videoInfo.title }}</h3>
        <p class="text-hidden__3"
           :title="props.videoInfo?.describe"
        >{{ props.videoInfo.describe }}</p>
        <div>
          <strong class="link" @click="router.toHome(props.videoInfo!.user.id)">{{ props.videoInfo.user.name }}</strong>
          <i>{{ dateConversion(props.videoInfo.createTime) }}</i>
        </div>
      </div>
      <div :style="{
        color: props.index == 0 ? '#FFB01F' : props.index == 1 ? '#94B5DB' : props.index == 2 ? '#EF9C8E' : '#7B859A'
      }">{{ Math.round(props.videoInfo.score) }}
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import VideoCover1 from "@/components/VideoCover1.vue";
import {dateConversion, isNull} from "@/utils/common";
import router from "@/router/router"
import { Video } from "@/types/video";

const props = defineProps({
  videoInfo: {
    required: true,
    type: Object as () => Video
  },
  index: {
    required: false,
    default: -1
  }
});
</script>

<style scoped lang="scss">
.card__root {
  width: 100%;
  height: 140px;
  overflow: hidden;
  background-color: #fafafa;
  border-radius: 10px;
  box-shadow: 0 0 5px 5px #e0e0e0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.common-layout__card2 {
  position: relative;
  display: flex;
  height: 130px;
  width: 98%;

  &>div{
    &:first-child {
      width: 220px;
    }
    &:nth-child(2) {
      text-align: left;
      margin-left: 20px;
      width: calc(100% - 230px);

      &>h3, &>p {
        width: calc(100% - 50px);
      }
      &>h3 {
        font-size: 18px;
      }

      &>div:last-child {
        position: absolute;
        bottom: 0;
        color: grey;
        font-size: 16px;

        &>i {
          position: relative;
          top: 2px;
          margin-left: 5px;
        }
      }
    }
    &:last-child {
      position: absolute;
      top: 0px;
      right: 5px;
      font-size: 22px;
      font-weight: 900;
      font-style: italic;
    }
  }
  .rank-index {
    position: absolute;
    top: 0;
    left: 0;
    color: white;
    width: 40px;
    border-top-left-radius: 4px;
    border-bottom-right-radius: 4px;
  }
}

</style>